<%= header %>
<%= boomerangSnippet %>
<script src="04-resource-sizes.js" type="text/javascript"></script>
<script src="../../vendor/resourcetiming-compression/src/resourcetiming-decompression.js" type="text/javascript"></script>

<img src="/assets/img.jpg?1" style="position: absolute; top: 500px; left: 100px; width: 400px; height: 200px" />

<script>
var t = BOOMR_test;

BOOMR_test.init({
	testAfterOnBeacon: true,
	ResourceTiming: {
		enabled: true
	}
});

// send 2 xhrs and 2 fetches with the same img so that we have multiple entries for the same partial resource name
var xhr1 = new XMLHttpRequest();
xhr1.open("GET", "/assets/img.jpg?2");
xhr1.send(null);

var xhr2 = new XMLHttpRequest();
xhr2.open("GET", "/assets/img.jpg?3");
xhr2.send(null);

if (t.isFetchApiSupported()) {
	function consume(res) {
		res.blob();
	}

	// if we don't consume them then they don't get added to RT in Chrome
	var f1 = fetch("/assets/img.jpg?4").then(consume);
	var f2 = fetch("/assets/img.jpg?5").then(consume);
}
</script>

<!-- a final image to ensure the above resources are finished before onload fires -->
<img src="/delay?delay=3000&file=/blackhole" />
<%= footer %>
